<template>
    <div id="art">
        <div class="newsDetailContent">
			<div class="newsDetailDiv">
				<div class="newsDetailBlue"></div>
				<div class="newsDetailWhite"> </div>
				<div class="newsDetailBox">
					<div class="detailOver" style="overflow: inherit;">
						<div class="listCenter">
							<div class="articleTitle">{{ariticl.title}}</div>
							<div class="articletime">
								<span class="timeicon"></span>
								<span class="timenum">{{ariticl.time}}</span>
							</div>
							<div class="line">
								<div class="lineL"></div>
								<div class="lineR"></div>
							</div>
							<div class="articleCenter">
                {{ariticl.data}}
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      ariticl: {
        title: "知道你，是你让我找回自己！",
        time: "2018/11/22 15:22:32",
        data: `您在鲸版权提交的认证申请已通过审核，请登陆查看，感谢您的使用
            您在鲸版权提交的认证申请已通过审核，请登陆查看，感谢您的使用
            您在鲸版权提交的认证申请已通过审核，请登陆查看，感谢您的使用
            您在鲸版权提交的认证申请已通过审核，请登陆查看，感谢您的使用
            您在鲸版权提交的认证申请已通过审核，请登陆查看，感谢您的使用
            您在鲸版权提交的认证申请已通过审核，请登陆查看，感谢您的使用`
      }
    };
  },
  mounted() {
    // console.log("Articlid", this.$route.params.id); //获取id
  },
  methods: {}
};
</script>
<style scoped>

* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
li {
  list-style: none;
}
.newsDetailContent {
  width: 100%;
  height: 712px;
  min-width: 1400px;
  background-color: #fff;
}
.newsDetailContent .newsDetailDiv {
  width: 100%;
  height: 100%;
  position: relative;
}
.newsDetailContent .newsDetailDiv .newsDetailBlue {
  width: 100%;
  height: 260px;
  background-color: #6081ff;
}
.newsDetailContent .newsDetailDiv .newsDetailWhite {
  width: 100%;
  height: 452px;
  background-color: #fff;
}
.newsDetailContent .newsDetailDiv .newsDetailBox {
  width: 1200px;
  min-width: 1200px;
  height: 648px;
  border-radius: 6px;
  box-shadow: 6px 0px 32px rgba(96, 129, 255, 0.16);
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.newsDetailContent .newsDetailDiv .newsDetailBox .detailOver {
  width: 1120px;
  height: 90%;
  overflow: scroll;
}
.newsDetailContent .newsDetailDiv .newsDetailBox .listCenter {
  width: 100%;
  height: 90%;
}
.newsDetailContent .newsDetailDiv .newsDetailBox .listCenter .articleTitle {
  font-size: 24px;
  font-weight: bold;
}
.newsDetailContent .newsDetailDiv .newsDetailBox .listCenter .articletime {
  display: flex;
  height: 49px;
  align-items: center;
}
.newsDetailContent
  .newsDetailDiv
  .newsDetailBox
  .listCenter
  .articletime
  .timeicon {
  width: 15px;
  height: 15px;
  background-image: url("../../assets/articl/timeicon.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.newsDetailContent
  .newsDetailDiv
  .newsDetailBox
  .listCenter
  .articletime
  .timenum {
  color: #999;
  font-size: 14px;
  margin-left: 6px;
}
.newsDetailContent .newsDetailDiv .newsDetailBox .listCenter .line {
  display: flex;
  margin: 0 auto;
  width: 1120px;
}
.newsDetailContent .newsDetailDiv .newsDetailBox .listCenter .line .lineL {
  width: 108px;
  height: 4px;
  background-color: #6081ff;
}
.newsDetailContent .newsDetailDiv .newsDetailBox .listCenter .line .lineR {
  width: 1012px;
  height: 4px;
  background-color: #d3deff;
}
.newsDetailContent .newsDetailDiv .newsDetailBox .listCenter .articleCenter {
  margin-top: 24px;
  color: #666;
  line-height: 20px;
  font-size: 14px;
  overflow: auto;
  height: 500px;
}
.articleCenter::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.articleCenter::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background-color: #667aca;
  background-image: -webkit-linear-gradient(
    45deg,
    #6081ff 25%,
    transparent 25%,
    transparent 50%,
    #6081ff 50%,
    #6081ff 75%,
    transparent 75%,
    transparent
  );
}
.articleCenter::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0, 10, 0, 0.2);
  background: #ededed;
}
</style>


